import { observer } from 'mobx-react-lite';
// import { Progress, RightOutlined } from 'esy-ui';
import { useCallback, useEffect, useState } from 'react';
import { Button, Dialog, isArray } from 'esy-ui';
import { useGlobalStore, useUserInfoStore } from '@/mobx';
import { useFormatText, useNavigation } from '@/hooks';
import { Img } from '@/components';
import avatarDef from '@/assets/images/common/icon_photo_none.png';
// import levPng from '@/assets/images/common/level_customized_default.png';
import btnDotPng from '@/assets/images/common/btn_deposit_n.png';
import btnWitPng from '@/assets/images/common/btn_withdrawal_n.png';
import btnGiftPng from '@/assets/images/common/btn_backwater_n.png';
import btnTrsPng from '@/assets/images/common/btn_trans_n.png';
import icon1 from '@/assets/images/common/icon_memberdata_n.png';
import icon2 from '@/assets/images/common/icon_effectivebetting_n.png';
import icon3 from '@/assets/images/common/icon_offer_n.png';
import icon4 from '@/assets/images/common/icon_betrecord_n.png';
import icon5 from '@/assets/images/common/icon_cashrecord_n.png';
import icon6 from '@/assets/images/common/icon_processingorder_n.png';
import icon7 from '@/assets/images/common/icon_news_n.png';
import icon8 from '@/assets/images/common/icon_usermsg_n.png';
import icon9 from '@/assets/images/common/icon_gamenews_n.png';
import icon10 from '@/assets/images/common/icon_feedback_n.png';
import logoutPng from '@/assets/images/common/logout.webp';
import { postLoginOut } from '@/services';
import BalanceContent from '@/layouts/balance-content';
import { nameSuffix } from '@/constants';

const list = [
  {
    tKey: 'text_4',
    url: btnDotPng,
    link: '/deposit',
  },
  {
    tKey: 'text_5',
    url: btnWitPng,
    link: '/withdraw',
  },
  {
    tKey: 'text_31',
    url: btnGiftPng,
    link: '/activity',
  },
  {
    tKey: 'text_30',
    url: btnTrsPng,
    link: '/bet/amount-trans',
  },
];

// 个人资料
const l1 = {
  title: 'text_91',
  list: [
    {
      tKey: 'text_32',
      url: icon1,
      link: '/bet/info',
    },
    {
      tKey: 'text_33',
      url: icon2,
      link: '/bet/account-safety',
    },
  ],
};

// 记录
const l2 = {
  title: 'text_94',
  list: [
    {
      tKey: 'text_6',
      url: icon4,
      link: '/bet/record',
    },
    {
      tKey: 'text_36',
      url: icon5,
      link: '/bet/withdraw-record',
    },
  ],
};

// 我的返佣
const l3 = {
  title: 'text_95',
  list: [
    {
      tKey: 'text_96',
      url: icon5,
      link: '/bet/invite/1',
    },
    {
      tKey: 'text_97',
      url: icon6,
      link: '/bet/invite/2',
    },
    {
      tKey: 'text_98',
      url: icon4,
      link: '/bet/invite/3',
    },
    {
      tKey: 'text_35',
      url: icon3,
      link: '/bet/invite/4',
    },
  ],
};

// 消息公告
const l5 = {
  title: 'text_99',
  list: [
    {
      tKey: 'text_38',
      url: icon8,
      link: '/bet/infomation',
    },
    {
      tKey: 'text_101',
      url: icon7,
      link: '/bet/system-nots',
    },
    {
      tKey: 'text_39',
      url: icon9,
      link: '/bet/gamenots',
    },
    {
      tKey: 'text_40',
      url: icon10,
      link: '/feedback',
    },
  ],
};

function Mine() {
  const { userInfo, balance, clearUserInfo } = useUserInfoStore();
  const { customer } = useGlobalStore();
  const { text } = useFormatText();
  const navigation = useNavigation();
  const [l4, setL4] = useState({ title: 'text_102', list: [] });
  const [open, setOpen] = useState(false);

  useEffect(() => {
    if (isArray(customer)) {
      console.info(12, customer);
      setL4((pre) => ({ ...pre, list: customer }));
    }
  }, [customer]);

  const openBalance = () => {
    // 客服
    // setL4({ title: 'text_102', list:  });
  };

  // 打开退出登录弹窗
  const onOpen = useCallback(() => {
    setOpen(true);
  }, []);

  // 关闭退出登录弹窗
  const onClose = useCallback(() => {
    setOpen(false);
  }, []);

  const toPage = (lk: string, showType?: number) => {
    if (showType === 1) {
      // 弹窗
    } else {
      navigation(lk);
    }
  };

  // 退出登录
  const onlogout = () => {
    postLoginOut({})
      .then(() => {
        clearUserInfo();
        onClose();
      })
      .catch(() => {});
  };

  return (
    <div className='bg-body h-full w-full overflow-y-auto pb-4'>
      <div className='w-full bg-lg-4 text-white pb-5'>
        <div className='text-base text-center py-2 relative'>
          {text('person_center')}
          <div className='absolute top-0 right-1 p-2' onClick={onOpen}>
            <Img boxClassName='w-6 h-6 ' src={logoutPng} />
          </div>
        </div>
        <div className='py-2 px-3 flex relative'>
          <Img boxClassName='w-16 h-16 rounded-half bg-white p-0.5' src={userInfo?.HeadImg || avatarDef} />
          <div className='p-3 flex flex-col justify-between'>
            <div className='text-xs text-primary'>
              {userInfo?.NickName}
              {nameSuffix}
            </div>
            <div className='text-sm text-white'>￥{balance}</div>
          </div>
          <BalanceContent>
            <div className='text-sm py-1 px-3 bg-primary rounded-full text-black absolute right-3 bottom-4' onClick={openBalance}>
              {text('text_26')}
            </div>
          </BalanceContent>
        </div>
      </div>
      {/* <div className='bg-white border border-solid border-bdr-1 -mt-5 rounded-b-sm mx-2.5 py-5 px-4'>
        <div className='flex items-center text-base'>
          <Img className='w-6 h-6' src={levPng} />
          <div className='ml-1 mr-5 font-bold'>{text('level_1')}</div>
          <div className='flex items-center text-desc'>
            {text('text_29')}
            <RightOutlined className='text-xs text-desc' />
          </div>
        </div>
        <Progress percent={10} label />
        <div className='flex items-center justify-between text-sm'>
          <div className='text-primary'>{text('level_1')}</div>
          <div className='text-split'>VIP1</div>
        </div>
      </div> */}
      <div className='bg-white border border-solid border-bdr-1 mt-2 mb-1 rounded-sm mx-2.5 py-3 px-2.5 gap-2 flex items-center justify-between'>
        {list.map((it) => (
          <div className='flex flex-col text-desc text-sm flex-1 text-center' key={it.tKey} onClick={() => toPage(it.link)}>
            <Img boxClassName='w-10 h-10 mb-1 mx-auto' src={it.url} />
            {text(it.tKey)}
          </div>
        ))}
      </div>
      <Img boxClassName='border border-solid border-bdr-1 rounded-sm mx-2.5 overflow-hidden h-24' src='https://g1.torry.vip/infe/mcenter/images/lang/zh-cn/banner.png' />
      <div className='border border-solid border-bdr-1 rounded-sm p-4 bg-white mx-2.5 my-1'>
        {[l1, l2, l3, l4, l5].map((item) => (
          <div key={item.title}>
            <div className='text-sm before:w-1 before:h-5 before:bg-primary before:block before:mx-1 before:rounded flex items-center'>{text(item.title)}</div>
            <div className='flex items-center'>
              {item.list.map((it) => (
                <div key={it.tKey || it.Id} className='w-1/4 my-3 text-center flex flex-col gap-1 text-split text-xs' onClick={() => toPage(it.link || it.ConfigValue, it.ShowType)}>
                  <Img boxClassName='w-6 h-6 mx-auto' src={it.url || it.Icon} />
                  {text(it.tKey || it.Title)}
                </div>
              ))}
            </div>
          </div>
        ))}
      </div>

      <Dialog open={open} onClose={onClose} direction='center'>
        <div className='bg-white rounded-lg p-3'>
          <div className='text-base text-center py-2'>{text('text_132')}</div>
          <div className='text-sm text-center py-3 min-h-14'>{text('text_133')}</div>
          <div className='flex items-center justify-between gap-2'>
            <Button type='link' className='flex-1 rounded' onClick={onClose}>
              {text('text_134')}
            </Button>
            <Button type='primary' className='flex-1 rounded' onClick={onlogout}>
              {text('logout')}
            </Button>
          </div>
        </div>
      </Dialog>
    </div>
  );
}

export default observer(Mine);
